<!-- 未更改 -->
<template>
    <div id="emp">
        <el-card class="box-card" shadow="always">
            <!-- card的头部 -->
            <template #header>
                <div class="card-header">


                    <span class="title">排班管理界面</span>
                    <div class="input_search">
                        <el-input v-model="search" @input="search_change" placeholder="姓名查询" />
                    </div>
                    <el-button class="button_edit" type="primary" :icon="Plus" @click="preDate4Add">添加新员工</el-button>
                </div>
            </template>
            <!-- 以下是card的body区域，直接使用标签即可，不需要使用插槽 -->
            <!-- 员工信息列表 -->
            <el-table :data="pageDate" style="width: 100%"  >
                <el-table-column prop="id" label="排班id" />
                <el-table-column prop="docname" label="医生姓名" />
                <el-table-column prop="mon" label="星期一" />
                <el-table-column prop="tue" label="星期二" />
                <el-table-column prop="wed" label="星期三" />
                <el-table-column prop="thu" label="星期四" />
                <el-table-column prop="fri" label="星期五" />
                <el-table-column prop="sat" label="星期六" />
                <el-table-column prop="sun" label="星期日" />
    
                <el-table-column prop="delmark" label="生效标记"  >
                    <template #header>
                        <!-- 生效标记<br /> -->
                        <el-switch v-model="show_del" active-text="全部" :active-value=0 :inactive-value=1
                            inactive-text="生效" @click="switch_del" />
                            
                    </template>
                    <template #default="scope">
                        <el-switch v-model="scope.row.delmark" active-color="#ff4949" inactive-color="#13ce66"
                            active-text="失效" :active-value='1' :inactive-value='0' inactive-text="生效"
                            @click="switch_change(scope.$index, scope.row)" />
                        <!-- <el-button @click="test(scope.row)">123</el-button> -->
                    </template>
                </el-table-column>

                <!-- <el-table-column prop="delmark" label="删除？"/> -->

                <el-table-column label="Operations">

                    <template #default="scope">
                        <el-button class="button_edit" @click="preDate4mod(scope.$index, scope.row)">编辑</el-button>
                        <!-- <el-button size="small" type="danger">Delete</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
               @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentpage"
              :page-sizes="[5, 10, 50, 100]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
        </el-card>
        <!-- 添加增加和修改对话框即可  -->
    </div>




    <el-dialog v-model="AddDialogVisible" title="新增排班" :width="dialog_width" >

        <el-form :model="addform">

           <el-form-item label="排班编号" :label-width="formLabelWidth">
                <el-input v-model="addform.id" autocomplete="off" disabled placeholder="后台自动生成" />
            </el-form-item>
            <el-form-item label="医生名字" :label-width="formLabelWidth">
                <el-input v-model="addform.docname" autocomplete="off" />
            </el-form-item>
            <el-form-item label='星期一' :label-width="formLabelWidth">
                <!-- <el-input v-model="addform.mon" autocomplete="off" /> -->
                <el-select v-model="addform.mon" class="el_select" value-key="value" :style="el_select_style"
                    placeholder="请选择">
                    <el-option v-for="item in statue2code" :key="item.id" :label="item.state"
                        :value="item.id"></el-option>
                </el-select>

                <span style="margin-left: 10px;">星期二：</span>
                <el-select v-model="addform.tue" class="el_select" value-key="value" :style="el_select_style"
                    placeholder="请选择">
                    <el-option v-for="item in statue2code" :key="item.id" :label="item.state"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label='星期三' :label-width="formLabelWidth">
                <el-select v-model="addform.wed" class="el_select" value-key="value" :style="el_select_style"
                    placeholder="请选择">
                    <el-option v-for="item in statue2code" :key="item.id" :label="item.state"
                        :value="item.id"></el-option>
                </el-select>

                <span style="margin-left: 10px;">星期四：</span>
                <el-select v-model="addform.thu" class="el_select" value-key="value" :style="el_select_style"
                    placeholder="请选择">
                    <el-option v-for="item in statue2code" :key="item.id" :label="item.state"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label='星期五' :label-width="formLabelWidth">
                <el-select v-model="addform.fri" class="el_select" value-key="value" :style="el_select_style"
                    placeholder="请选择">
                    <el-option v-for="item in statue2code" :key="item.id" :label="item.state"
                        :value="item.id"></el-option>
                </el-select>

                <span style="margin-left: 10px;">星期六：</span>
                <el-select v-model="addform.sat" class="el_select" value-key="value" :style="el_select_style"
                    placeholder="请选择">
                    <el-option v-for="item in statue2code" :key="item.id" :label="item.state"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label='星期日' :label-width="formLabelWidth">
                <el-select v-model="addform.sun" class="el_select" value-key="value" :style="el_select_style"
                    placeholder="请选择">
                    <el-option v-for="item in statue2code" :key="item.id" :label="item.state"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="psw_same" label="" :label-width="formLabelWidth" style="color: red;">
                <span style="color: red;">两次输入的密码不同</span>
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="AddDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addData">
                    确认增加
                </el-button>
            </span>
        </template>
    </el-dialog>
        <el-dialog v-model="ModDialogVisible" title="更改信息" :width="dialog_width" >

            <el-form :model="modform">

               <el-form-item label="排班编号" :label-width="formLabelWidth">
                    <el-input v-model="modform.id" autocomplete="off" disabled placeholder="后台自动生成" />
                </el-form-item>
                <el-form-item label="医生名字" :label-width="formLabelWidth">
                    <el-input v-model="modform.docname" autocomplete="off" />
                </el-form-item>
                <el-form-item label='星期一' :label-width="formLabelWidth">
                    <!-- <el-input v-model="modform.mon" autocomplete="off" /> -->
                    <el-select v-model="modform.mon" class="el_select" value-key="value" :style="el_select_style"
                        placeholder="请选择">
                        <el-option v-for="item in statue2code" :key="item.id" :label="item.state"
                            :value="item.id"></el-option>
                    </el-select>

                    <span style="margin-left: 10px;">星期二：</span>
                    <el-select v-model="modform.tue" class="el_select" value-key="value" :style="el_select_style"
                        placeholder="请选择">
                        <el-option v-for="item in statue2code" :key="item.id" :label="item.state"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label='星期三' :label-width="formLabelWidth">
                    <el-select v-model="modform.wed" class="el_select" value-key="value" :style="el_select_style"
                        placeholder="请选择">
                        <el-option v-for="item in statue2code" :key="item.id" :label="item.state"
                            :value="item.id"></el-option>
                    </el-select>

                    <span style="margin-left: 10px;">星期四：</span>
                    <el-select v-model="modform.thu" class="el_select" value-key="value" :style="el_select_style"
                        placeholder="请选择">
                        <el-option v-for="item in statue2code" :key="item.id" :label="item.state"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label='星期五' :label-width="formLabelWidth">
                    <el-select v-model="modform.fri" class="el_select" value-key="value" :style="el_select_style"
                        placeholder="请选择">
                        <el-option v-for="item in statue2code" :key="item.id" :label="item.state"
                            :value="item.id"></el-option>
                    </el-select>

                    <span style="margin-left: 10px;">星期六：</span>
                    <el-select v-model="modform.sat" class="el_select" value-key="value" :style="el_select_style"
                        placeholder="请选择">
                        <el-option v-for="item in statue2code" :key="item.id" :label="item.state"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label='星期日' :label-width="formLabelWidth">
                    <el-select v-model="modform.sun" class="el_select" value-key="value" :style="el_select_style"
                        placeholder="请选择">
                        <el-option v-for="item in statue2code" :key="item.id" :label="item.state"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

            </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="ModDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="modData">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import $axios from '../../utils/axios'
const psw_same = ref(false)

const dialog_width='35%'
const formLabelWidth = '140px'
const el_select_style='width:200px;'

import {

    Plus,
    User
} from '@element-plus/icons-vue'
import axios from 'axios';

const tableData = ref([
    {
        id:'',
        docname:'',
        mon:'',
        tue:'',
        wed:'',
        thu:'',
        fri:'',
        sat:'',
        sun:'',
    }
])
const pageDate=ref([
        {
        id: '',
        docname: '',
        mon: '',
        tue: '',
        wed: '',
        thu: '',
        fri: '',
        sat: '',
        sun: '',
    }
])
const statue2code=ref([{
    id:0,
    state:'休假',
}])
const AddDialogVisible = ref(false)
const ModDialogVisible = ref(false)
const show_del = ref(0)
// const test=(row) => {
//     console.log(row);
//     row.delmark=row.delmark==1?0:1;
// }

const addform = ref({
    id:'',
    docname:'赵子鉴',
    mon:1,
    tue:2,
    wed:3,
    thu:1,
    fri:0,
    sat:1,
    sun:1,
    delmark:0,
})
const PswChange = ref(false);
const modform = ref({
    id: '',
    docname: '',
    mon: '',
    tue: '',
    wed: '',
    thu: '',
    fri: '',
    sat: '',
    sun: '',
    delmark: '',
})

let curentindex = -1
const preDate4Add = () => {
    AddDialogVisible.value = true
}



const preDate4mod = async (index, row) => {
    // console.log(typeof (parseInt(row.regnum)), parseInt(row.regnum));

    const path = "/sch/q/byid/" + row.id
    const { data: res } = await $axios.get(path)
    
    if (res.code == 200) {
        console.log(res);
        curentindex = index;
        ModDialogVisible.value = true;
        modform.value = res.result;
    }
}


const modData = () => {
   
    
    const path = '/sch/update'
    // weekString2Num4Mod();
    console.log("mod:", modform.value);
    $axios.post(path, modform.value, {

        headers: {
            'Content-Type': 'application/json;utf-8'
        }

    }).then((res) => {
        if (res.data.code === 200) {
            // console.log("addform:", modform.value);
            // console.log("res:", res.data);
            tableData.value.splice(curentindex, 1, modform.value)
            loaddata();
            ModDialogVisible.value = false
            
        }
    })

}
//已通，待改数据
const addData = async () => {

    console.log(addform.value);
    const path = "/sch/add"
    if (addform.value.password != addform.value.copypsw) {
        psw_same.value = true;
        return;
    }
    const { data: res } = await $axios.put(
        path, addform.value,
        {
            headers: {
                'Content-Type':
                    'application/json; charset=UTF-8' //将表单数据传递转化为form-data类型
            }
        })
    if (res.code == 200) {

        // console.log("re:", res.result);
        addform.value.regnum = res.result.regnum

        let obj = JSON.parse(JSON.stringify(addform.value))

        tableData.value.push(obj)
        //loaddata()
        AddDialogVisible.value = false
        loaddata()
    }

}

const switch_change = async (index,row) => {
    
    console.log("switch_change:","row:",row,"index:",index)
    const path = "/sch/delet"
    const getpath= "/sch/q/byid/" + row.id
    let postdata={};
   
    const { data: res_get } = await $axios.get(getpath)

    if (res_get.code == 200) {
        postdata=res_get.result;
        postdata.delmark=row.delmark;
        console.log("postdata:",postdata,"row:",row);
        $axios.post(path, postdata, {
            headers: {
                'Content-Type': 'application/json;utf-8'
            }

        }).then((res) => {
            if (res.data.code === 200) {
                console.log("del_res:", res.result);
            }
        })
    }
}
const switch_del = async () => {
    // console.log(show_del.value);
    //1是仅显示生效，0为全部显示
    if (show_del.value === 0) {
        loaddata()
    }
    else if (show_del.value === 1) {
        const path = '/sch/q/all'
        // 发同步请求
        // 发完ajax请求以后，进入等待状态，直到服务器做出响应或者超时
        // 并且返回服务器做出响应
        // console.log("加载生效数据");
            
        const { data: res } = await $axios.get(path)
        // 应用结果
        if (res.code === 200) {
            tableData.value = res.result
            // console.log("加载数据成功：");
            // console.log(res.result);

        }
        tableData.value = tableData.value.filter(checkItem)
        getPageInfo()
        // console.log(tableData.value);
    }

}
function checkItem(num) { return num.delmark === 0; }
function searchItem(num) { 
    // console.log("test:\n" + num.name + " " + num.name.indexOf(search.value)); 
    return !(num.name.indexOf(search.value) === -1); 
}
const search = ref()
const search_change = async () => {
    const path = '/sch/q/all'
    // 发同步请求
    // 发完ajax请求以后，进入等待状态，直到服务器做出响应或者超时
    // 并且返回服务器做出响应
    console.log("为表格自动加载数据");
    const { data: res } = await $axios.get(path)
    // 应用结果
    if (res.code === 200) {
        tableData.value = res.result
        console.log("加载数据成功：");
        console.log(res.result);

    }
    var s = tableData.value.filter(searchItem);
    tableData.value = s
    console.log("fileter_search",tableData.value.filter(searchItem));
    getPageInfo()

}
const autoSet = () => {

}
autoSet()
// 为表格加载数据

const loaddata = async () => {
    const path_state = "/statuecode/q/all"
    await $axios.get(path_state).then((res) => {
        if (res.data.code == 200) {
            statue2code.value = res.data.result;
            console.log("码表数据:", statue2code.value);
        }
    })
    // test_statue2code();


    // 定义请求路径
    const path = '/sch/q/all'
    // 发同步请求
    // 发完ajax请求以后，进入等待状态，直到服务器做出响应或者超时
    // 并且返回服务器做出响应
    // console.log("为表格自动加载数据");
    const { data: res } = await $axios.get(path)
    // 应用结果
    if (res.code === 200) {
        tableData.value = res.result
        // console.log("加载数据成功：");
        // console.log(res.result);
        total.value=tableData.value.length
        getPageInfo();
        // console.log("pagedate:",pageDate.value);
    }
    weekNum2String()
}
// 调用
loaddata()




const total= ref(0)//总数据条数
const currentpage= ref(1)  //当前所在页默认是第一页
const pagesize=ref(10)  //每页显示多少行数据 默认设置为10
// const  ticket: [] //这里是从后端获取的所有数据
// const pageTicket: []//分页后的当前页数据

/**
 * 
 * 修改全表数据，对应每一天的工作情况
 */
const weekNum2String=()=>{
    for (let i in tableData.value){
        for(let j in tableData.value[i]){
            if (j != 'id' && j != 'docname' && j != 'delmark') {
                console.log();
                tableData.value[i][j]=statue2code.value[tableData.value[i][j]].state;
                // console.log("value:", tableData.value[i][j]);
            }
        }
        // console.log("\n");
    }
    // console.log("vector:", tableData.value);
}
const weekString2Num4Add=()=>{
    for (let i in addform.value){
        for(let j in addform.value[i]){
            if (j != 'id' && j != 'docname' && j != 'delmark'){
                addform.value[i][j]= statue2code.value[addform.value[i][j]].id;
            }
        }
    }
}
const weekString2Num4del = () => {
    for (let i in modform.value){
        
        if(i!='id' && i!='docname' && i!='delmark'){
            // console.log("statue2code:",statue2code.value);
            for(let j in statue2code.value)
            {
                // console.log("modform.value[i]:",i);
                if(modform.value[i]===statue2code.value[j].id)
                {
                    console.log(1);
                    // modform.value[i]=statue2code.value[j].state;
                }
            }
            

        }
        // console.log("modform.value", modform.value);
    }
    console.log("modform.value", modform.value);
}

function test_statue2code(){
    console.log("statue2code:",statue2code);
    console.log("statue2code.value:",statue2code.value);
    console.log("statue2code.state:",statue2code.value[0].state);//可以对应上具体的state值
}


// 获取当前页的数据信息
function getPageInfo(){
    //清空pageTicket中的数据
    pageDate.value = [];
    // console.log("1:");
    // console.log(currentpage.value);
    // console.log(pagesize.value);

    // 获取当前页的数据
    
    for (let i = (currentpage.value - 1) * pagesize.value; i < total.value; i++) 
    {
        //把遍历的数据添加到pageTicket里面
        pageDate.value.push(tableData.value[i]);
        //判断是否达到一页的要求
        if (pageDate.value.length === pagesize.value) break;
    }
}
//分页时修改每页的行数,这里会自动传入一个size
const handleSizeChange=(size)=>{
    //修改当前每页的数据行数
    pagesize.value = size;
    //数据重新分页
    getPageInfo();
} 
//调整当前的页码
function handleCurrentChange(pageNumber){
    //修改当前的页码
    currentpage.value = pageNumber;
    //数据重新分页
    getPageInfo()
}

</script>

<style scoped land="scss">
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
        font-size: 24px;
    }

    .input_search {

        width: 400px;
        left: 0%;
    }

    .el-card__header {
        padding: 0;
    }
}

.button_edit {
    /* background: linear-gradient(135deg, rgb(132, 176, 229), rgb(63, 103, 214), rgb(132, 154, 234)); */
    /* background-color: linear-gradient(135deg, rgb(0, 0, 255), rgb(0, 128, 255), rgb(0, 255, 255)); */
    /* background: linear-gradient(135deg, rgb(0, 178, 74), rgb(100, 216, 149), rgb(69, 105, 143)); */
    color: white;
    background: linear-gradient(135deg, rgb(100, 100, 255), rgb(0, 128, 255), rgb(0, 200, 250));
    transition: background-color 1.5s ease;
}

.button_edit:hover {
    background: linear-gradient(135deg, rgb(0, 178, 74), rgb(100, 216, 149), rgb(69, 175, 203));
    color: yellow;
}

.button_edit:focus {
    background: linear-gradient(135deg, rgb(0, 178, 74), rgb(100, 216, 149), rgb(69, 175, 203));
    color: white;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 100%;
    margin-top: 12px;
    border-radius: 12px;
}

.cell-item {
    display: flex;
    align-items: center;
}
</style>